@use "sass:map";

.icon-picker {
  width: unset !important;
  margin-bottom: 0;
  flex-direction: row !important;
  align-items: center !important;

  .icon-picker-button,
  .icon-dropdown-option {
    min-width: $icon-size-md;
    width: $icon-size-md;
    height: $icon-size-md;
    border: $border-default;
    transition: border-color .15s ease-in-out;
    background-size: cover;
    filter: grayscale(1);

    &.active {
      border-color: $success;
      filter: none;
    }

    .gem-socket-container {
      --gem-width: 0.8rem;
    }
  }

  .icon-picker-button,
  .icon-dropdown-option {
    position: relative;
    display: block;
    background-color: grey;

    .icon-picker-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      background: rgba(0,0,0,.3);
      color: $success;
      font-size: .625rem;
      font-weight: bold;
      white-space: nowrap;
    }
  }

  .icon-input-level-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 1px;

    .icon-input-improved {
      position: absolute;
      bottom: 0;
      right: 0;
      min-width: 1.25rem;
      width: 1.25rem;
      height: 1.25rem;

      &:not([href]) {
        display: none;
      }
    }
  }

  label {
    margin-left: map.get($spacers, 1);
  }

  .dropdown-menu {
    min-width: unset;
    background: grey;
    border: none;

    &.show {
      display: grid;
    }

    .icon-dropdown-option {
      padding: 0;
      filter: opacity(.7);

      &:hover {
        filter: none;
      }

      .icon-picker-button {
        margin: -1px;
      }
    }
  }
}

.picker-group {
  &.icon-group {
    display: flex;
    flex-wrap: wrap;

    &> :not(:last-child) {
      margin-right: map.get($spacers, 1);
    }

    &> * {
      margin-bottom: $block-spacer;
      flex: 0;
  
      &:not(:last-child) {
        margin-right: $block-spacer;
      }
    }
  }
}
